@mixin dashboard-reports-view {
	
	.reports .drafts {
		padding-bottom: 100px;
		
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	.reports .drafts .v-slot {
		padding: 0 10px;
	}
	
	.reports .create {
		padding: 10px 0;
	}
	
	.reports .create .v-slot {
		border: 1px solid rgba(255,255,255,.1);
		background: rgba(255,255,255,.05);
		width: 160px;
		height: 200px;
		padding: 0;
	}
	
	.reports .drafts .h1 {
		color: #fff;
		text-shadow: 0 2px 4px rgba(0,0,0,.25);
		margin-bottom: 20px;
	}
	
	.reports .draft-thumb {
		cursor: pointer;
		/* TODO remove from base theme */
		overflow: visible;
		height: 216px;
		position: relative;
		padding: 10px;
	}
	
	.reports .draft-thumb .v-label {
		/* TODO why on earth does a label have display: inline-block as an inline style */
		display: block !important;
		color: #fff;
		text-shadow: 0 2px 4px rgba(0,0,0,.25);
		padding-top: 1em;
		text-align: center;
		line-height: 18px;
	}
	
	.reports .draft-thumb .v-label span {
		color: #c1c3c8;
		font-size: 12px;
	}
	
	.reports .draft-thumb .v-image {
		@include box-shadow(0 2px 7px 1px rgba(0,0,0,.5));
	}
	
	.reports .draft-thumb .v-image:hover {
		border: 2px solid #5198df;
		margin: -2px;
	}
	
	.reports .palette {
		position: fixed;
		color: #fff;
		text-shadow: 0 1px 1px rgba(0,0,0,.5);
		padding: 14px;
		width: 17%;
	}
	
	.reports .palette .help {
		font-size: 12px;
		color: #cfd1d3;
		display: block;
		white-space: normal;
		padding-top: 1em;
		width: 140px;
	}
	
	
	.reports .palette .v-caption {
		display: none;
	}
	
	.reports .palette .v-ddwrapper {
		display: block;
		text-align: center;
	}
	
	.reports .palette .v-image {
		width: 75px;
		height: 47px;
		margin: 2em 0 .3em 0;
	}
	
	.reports .palette .v-label {
		display: block !important;
	}
	
	.canvas {
		padding: 2em !important;
	}
	
	.canvas-layout {
		min-height: 29cm;
		background: #fff;
		
		padding: 1.5cm 1.5cm 3cm 1.5cm;
		
		@include box-shadow(0 2px 20px rgba(0,0,0,.5));
	/* 	-webkit-box-shadow: 0 2px 20px rgba(0,0,0,.5); */
	/* 	-moz-box-shadow: 0 2px 20px rgba(0,0,0,.5); */
	/* 	box-shadow: 0 2px 20px rgba(0,0,0,.5); */
	}
	
	.reports .canvas .title {
		font-size: 24px;
		font-weight: 600;
		border: 1px solid transparent;
		color: #404346;
		@include box-shadow(none);
		width: 100%;
		text-align: center;
		cursor: pointer;
		margin-bottom: 1cm;
	}
	
	.reports .canvas .title:hover {
		background: #fff9e6;
	}
	
	.reports .canvas .title:focus {
		cursor: text;
		border-color: #eee;
		background: transparent;
	}
	
	.reports .canvas .placeholder {
		text-align: center;
	}
	
	.reports .canvas .placeholder .v-label {
		min-height: 10cm;
		line-height: 5cm;
		color: #979699;
		font-size: 18px;
	}
	
	.reports .v-tabsheet-content::before {
		background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
		height: .5em;
	}
	
	.reports .v-tabsheet-content {
		
		background: #75787c;
		
		background-image: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), url(../img/dark-canvas-bg.jpg);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0))), url(../img/dark-canvas-bg.jpg);
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%), url(../img/dark-canvas-bg.jpg);
		background-image: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%), url(../img/dark-canvas-bg.jpg);
		background-image: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%), url(../img/dark-canvas-bg.jpg);
	/* 	background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%), url(../img/dark-canvas-bg.jpg); */
	}
	
	
	.reports .v-timeline-widget-display-hscale-left {
		font-size: 10px;
		margin-top: -14px;
		padding-left: 3px;
	}
	
	.reports .canvas .v-ddwrapper {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	
	.reports .text-editor {
		position: relative;
		overflow: visible;
	}
	
	.reports .text-editor:hover {
		background: #fff9e6;
	}
	
	.reports .text-editor.edit:hover {
		background: transparent;
	}
	
	.text-editor .v-button {
		position: absolute;
		top: 50%;
		margin-top: -12px;
		right: -20px;
		display: none;
	}
	
	.text-editor .v-button-wrap:before {
		margin: 0 -.3em;
	}
	
	.text-editor:hover .v-button {
		display: inline-block;
	}
	
	.reports .text-editor.edit .v-button {
		display: inline-block;
		position: static;
		margin-top: 3px;
	}
	
	/* TODO maybe offer this as a mixin */
	.delete-button {
		width: 19px;
		height: 19px;
		border: 1px solid #a3a7ab;
		@include border-radius(2px);
		background: #73767a;
		color: #fff;
		font: inherit;
		font-size: 16px;
		line-height: 1;
		text-shadow: 0 1px 0 rgba(0,0,0,.25);
		text-align: center;
		cursor: default;
		@include box-shadow(0 2px 4px rgba(0,0,0,.5));
	}
	
	.delete-button:hover {
		background: #4e5153;
	}
	
	.delete-button:focus {
		outline: none;
	}
	
	.delete-button:active {
		background: #3c3f40;
	}
	
	.draft-thumb .delete-button {
		position: absolute;
		top: 1px;
		right: 1px;
		display: none;
	}
	
	.draft-thumb:hover .delete-button {
		display: block;
	}
	
	.help-overlay.palette {
		top: 200px !important;
		left: 200px !important;
	}
	
	.help-overlay.reorder {
		margin-left: 200px !important;
	}
	
	
	.reports .transaction {
		position: relative;
		float: left;
		width: 47%;
		margin-right: 2.5%;
		margin-top: 10px;
		
		background: #eee;
		border: 1px solid #e0e0e0;
	
		.time,
		.seats {
			font-size: 12px;
			color: #9fa2a6;
			position: absolute;
			top: 5px;
			left: 5px;
			line-height: normal;
		}
	
		.movie-title {
			font-size: 16px;
			font-weight: 300;
			white-space: normal;
			padding: 40px 5px 5px;
		}
		
		.seats {
			left: 60%;
		}
		
	
	}
	
}